<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/vue-router.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        .start {
            width: 750px;
            height: 400px;
            background-color: #ffffff;
            margin: 10px;
        }

        .header {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: rgb(105, 104, 104);
            font-size: 25px;
            text-align: center;
        }

        /* ==================== */
        .main {
            width: 100%;
            height: 360px;
        }

        .content.left {
            width: 200px;
            height: 360px;
            background-color: rgb(105, 104, 104);
            float: left;
        }

        .content.left>ul>li {
            width: 100%;
            height: 35px;
            background-color: rgb(211, 211, 211);
            display: flex;
            justify-content: center;
            align-content: center;
            border-bottom: 3px solid #ffffff;
            align-items: center;
        }

        /* --------------- */
        .content.right {
            width: 550px;
            height: 360px;
            background-color: rgb(240, 240, 240);
            float: left;
        }

        .main-content {
            width: 100%;
            /* height: 40px; */
            line-height: 40px;
            font-size: 20px;
            color: #000000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* ------------- */
        .userList li {
            width: 550px;
            height: 35px;
            list-style: none;
            display: block;
        }

        .userList li .liLtem {
            width: 33.3%;
            float: left;
            display: flex;
            justify-content: center;
        }

        /* ====================== */
        .footer {
            width: 100%;
            height: 35px;
            line-height: 35px;
            background-color: rgb(211, 211, 211);
            font-size: 16px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="app">
        <router-view></router-view>
    </div>

    <script>
        const App = {
            template: `
            <div class="start">
                <header class="header">个人管理系统</header>
                <div class="main">
                    <div class="content left">
                        <ul>
                            <li><router-link to='/user'>用户管理</router-link></li>
                            <li><router-link to='/rights'>权限管理</router-link></li>
                            <li><router-link to='/goods'>商品管理</router-link></li>
                            <li><router-link to='/orders'>订单管理</router-link></li>
                            <li><router-link to='/settings'>系统设置</router-link></li>
                        </ul>
                    </div>
                    <div class="content right">
                        <div class="main-content">
                            <router-view></router-view>
                        </div>
                        
                    </div>
                </div>
                <footer class="footer">版权信息</footer>
            </div>
            `,
        }

        const User = {
            template: `
            <div>
                <div class="main-content">
                    用户管理
                </div>
                <div class='userList'>
                    <ul>
                        <li v-for='item in userList' :key='id'>
                            <div class='liLtem'>{{item.id}}</div>    
                            <div class='liLtem'>{{item.name}}</div>    
                            <div class='liLtem'>{{item.age}}</div>    
                        </li>
                    </ul> 
                </div>
            </div>`,
            data() {
                return {
                    userList: [
                        { id: 1, name: 'lisi', age: 15 },
                        { id: 2, name: 'zhangsan', age: 14 },
                        { id: 3, name: 'wanwu', age: 13 },
                        { id: 4, name: 'wudi', age: 12 },
                    ]
                }
            }
        }
        const Rights = {
            template: `
            <div>
                <div class="main-content">
                    权限管理
                </div>
            </div>`,
        }
        const Goods = {
            template: `
            <div>
                <div class="main-content">
                    商品管理
                </div>
            </div>`
        }
        const Orders = {
            template: `
            <div>
                <div class="main-content">
                    订单管理
                </div>
            </div>`
        }
        const Settings = {
            template: `
            <div>
                <div class="main-content">
                    系统设置
                </div>
            </div>`
        }

        const router = new VueRouter({
            routes: [
                {
                    path: '/', component: App, redirect: "/user",
                    children: [
                        { path: '/user', component: User },
                        { path: '/rights', component: Rights },
                        { path: '/goods', component: Goods },
                        { path: '/orders', component: Orders },
                        { path: '/settings', component: Settings },
                    ]
                }

            ]
        })

        const vm = new Vue({
            el: '#app',
            router,
        })
    </script>
</body>

</html>